<template>
    <div>
        <h1>
            docker viewer
        </h1>
        <div class="card">
            <kv label="token">
                <el-input v-model="query.token"></el-input>
            </kv>
            <kv label="服务器地址">
                <el-input v-model.lazy="query.host" chk="*"></el-input>
            </kv>
            <el-button size="mini" @click="conn_click()">连接</el-button>
            <kv label="docker container">
                <selector :url="container_url" v-model="query.container"
                          @change="container_change_click"></selector>
            </kv>
        </div>
        <div class="navigate">
            <el-tag @click="tag_click(0)">/</el-tag>
            <template v-for="(item,index) in navigators">
                <span v-if="index">/</span>
                <el-tag @click="tag_click(index+1)">{{item}}</el-tag>
            </template>
        </div>

        <!--        <el-popover-->
        <!--                :title="hover_item.name"-->
        <!--                ref="popover1"-->
        <!--                placement="bottom-start"-->
        <!--                trigger="hover">-->
        <!--            <el-button size="mini" class="hover" @click="path_click(hover_item)">进入</el-button>-->
        <!--            <el-button size="mini" class="hover" @click="rename_click(hover_item)">改名</el-button>-->
        <!--            <el-button size="mini" class="hover" @click="delete_click(hover_item)">删除</el-button>-->
        <!--        </el-popover>-->


        <!--        <el-popover-->
        <!--                :title="hover_item.name"-->
        <!--                ref="popover2"-->
        <!--                placement="bottom-start"-->
        <!--                trigger="hover">-->
        <!--           -->
        <!--        </el-popover>-->


        <div ref="div1" class="pop_menu div1" @click.prevent.stop>
            <div class="title">{{hover_item.name}}</div>
            <el-button size="mini" type="primary" @click="path_click(hover_item)" v-if="">进入</el-button>
            <el-button size="mini" type="primary" @click="rename_click(hover_item)">改名</el-button>
            <el-button size="mini" type="primary" @click="delete_click(hover_item)">删除！</el-button>
        </div>
        <div ref="div2" class="pop_menu div2" @click.prevent.stop>
            <div class="title">{{hover_item.name}}</div>
            <el-button size="mini" type="primary" @click="view_click(hover_item)">查看</el-button>
            <el-button size="mini" type="primary" @click="download_click(hover_item)">下载</el-button>
            <el-button size="mini" type="primary" @click="rename_click(hover_item)">改名</el-button>
            <el-button size="mini" type="primary" @click="copy_click(hover_item)">Copy到宿主机</el-button>
            <el-button size="mini" type="primary" @click="delete_click(hover_item)">删除！</el-button>
        </div>
        <!--        <div v-menu:div1 style="position: absolute;left: 200px;background-color: red;padding: 30px;"-->
        <!--             @mousedown.right="hover_item={name:'ok'}">dfdf-->
        <!--        </div>-->
        <div class="card_path">
            <el-button size="mini" type="primary" @click="mkdir_click">创建</el-button>
            <div v-for="item in paths">
                <el-tag v-menu:div1 @click.native="path_click(item)" @mousedown.native.right="cont_click(item)">
                    {{item.name}}
                </el-tag>
            </div>
        </div>
        <div class="card_file">
            <div v-for="item in files">
                <el-tag v-menu:div2 @dblclick.native="view_click(item)" @mousedown.native.right="hover_item=item">
                    {{item.name}}
                </el-tag>
                {{item.size}}
            </div>
        </div>

        <upload
                :maxCount="1"
                v-model="file"
                fileType="*"
                :axiosConfig="{baseURL:query.host,headers:{'token':query.token}}"
                @changed="upload_click"
        ></upload>
    </div>
</template>

<script type="text/ecmascript-6">


    export default {
        components: {},
        data: function () {
            return {
                query: {
                    token: "",
                    host: "",
                    container: ""
                },
                hover_item: {},
                container_url: "",
                navigators: [],
                paths: [],
                files: [],
                file: {}
            }
        },
        mounted() {
            this.query = Object.assign(this.query, this.$my_store.getJson());

            if (!this.query.host) {
                this.query.host = this.$route.query.host;
            }
            if (!this.query.token) {
                this.query.token = this.$route.query.token;
            }
        },
        methods: {
            getWorkPath() {
                return this.navigators.map(it => "/" + it).join("") || "/"
            },
            cont_click(item) {
                this.hover_item = item
            },
            ajax(url, data) {
                return this.$http.post(this.query.host + url + "?token=" + this.query.token, Object.assign({
                    container: this.query.container,
                    work_path: this.getWorkPath()
                }, data));
            },
            rename_click(item) {
                jv.prompt("修改名称：" + item.name, "", {inputValue: item.name}).then(res => {
                    this.ajax("/dev/docker/rename", {name: item.name, newName: res.value}).then(res => {
                        jv.info("修改为 " + res.value + " !")
                        this.list();
                    })
                })
            },
            copy_click(item) {
                jv.confirm("Copy 到： /${uploadPath}/docker-" + Date.today().toDateString() + "/${当前时间}/" + item.name).then(res => {
                    this.ajax("/dev/docker/copy2host", {name: item.name}).then(res => {
                        jv.info("Copy 成功！")
                        this.list();
                    })
                })
            },
            delete_click(item) {
                jv.confirm("确认删除 " + name + " ?").then(res => {
                    this.ajax("/dev/docker/delete", {name: item.name}).then(res => {
                        jv.info("删除 " + item.name + " 成功！")
                        this.list();
                    })
                });
            },
            mkdir_click() {
                jv.prompt("新建文件夹：").then(res => {
                    this.ajax("/dev/docker/mkdir", {name: res.value}).then(res => {
                        jv.info("新建 " + res.value + " 成功！")
                        this.list();
                    })
                })
            },
            download_click(item) {
                var query = {};
                query.view = false;
                query.token = this.query.token;
                query.container = this.query.container;
                query.work_path = this.getWorkPath();
                query.name = item.name;
                jv.downloadFile(this.query.host + "/dev/docker/download?" + jv.param(query))
            },
            conn_click() {
                if (this.chk() == false) return;
                this.$my_store.setJson(this.query);
                this.container_url = this.query.host + '/dev/docker/containers?token=' + this.query.token + "&name=" + (this.query.docker || "");
            },
            tag_click(index) {
                this.navigators = this.navigators.slice(0, index);
                this.list();
            },
            path_click(item) {
                this.navigators.push(item.name);
                this.list();
            },
            view_click(item) {
                var query = {};
                query.view = true;
                query.token = this.query.token;
                query.container = this.query.container;
                query.work_path = this.getWorkPath();
                query.name = item.name;
                window.open(this.query.host + "/dev/docker/view?" + jv.param(query), "_blank")
            },
            container_change_click(v) {
                this.$my_store.setJson(this.query);
                this.navigators = [];
                this.list();
            },
            list() {
                this.ajax("/dev/docker/list").then(res => {
                    var json = res.data.data;

                    this.paths = json.filter(it => it.startsWith("d"))
                        .map(it => {
                            var sects = it.replace(/\s+/g, " ").split(" ");
                            return {p: sects[0], size: sects[4], name: sects[8]}
                        }).filter(it => {
                            return it && it.name && it.name != "." && it.name != ".."
                        });
                    this.files = json.filter(it => it.startsWith("-"))
                        .map(it => {
                            var sects = it.replace(/\s+/g, " ").split(" ");
                            return {p: sects[0], size: sects[4], name: sects[8]}
                        });
                });
            },
            upload_click(value) {
                this.ajax("/dev/docker/upload", {
                    name: value.name,
                    dbFile: value
                }).then(res => {
                    this.file = {};
                    this.list();
                })
            }
        }
    }
</script>

<style scoped>
    .pop_menu {
        position: absolute;
        visibility: hidden;
        z-index: 999;
        padding: 12px;
        border: solid 1px gray;
        box-shadow: 3px 3px 10px 3px grey;
    }

    .div1 {
        background-color: #7ffddb;
    }

    .div2 {
        background-color: #fdf994;
    }

    .pop_menu .title {
        margin-bottom: 16px;
        font-size: large;
        font-weight: bold;
    }

    .pop_menu >>> button{
        margin-bottom: 10px;
    }

    >>> .kv {
        margin: 10px;
        display: flex;
    }

    >>> .kv .k {
        display: inline-block;
        text-align: right;
        min-width: 160px;
    }

    >>> .kv .v {
        display: flex;
        flex: 1;
    }

    >>> .kv input {
        padding: 3px 5px;
        flex: 1;
    }

    .res {
        width: 100%;
        min-height: 300px;
        height: 500px;
    }

    .toolbar button {
        margin: 10px 40px 10px 0;
        padding: 5px 12px;
    }

    .card_path {
        display: flex;
        border: solid 1px green;
        margin: 10px;
        flex-wrap: wrap;
        background-color: #8e44d2;
        border-radius: 10px;
    }

    .card_file {
        display: flex;
        border: solid 1px blue;
        margin: 10px;
        flex-wrap: wrap;
        border-radius: 10px;
        background-color: #aedbf0;
    }

    .card_path > div, .card_file > div {
        margin: 12px 18px;
        background-color: lightgrey;
        white-space: nowrap;
        border-radius: 5px;
        cursor: default;
    }

    .card_path > div >>> span, .card_file > div >>> span {
        border-radius: 5px;
    }

    .card_path > div:hover >>> .el-tag {
        background-color: #298f8c;
        color: white;
    }

    .hover {
        background-color: #298f8c;
        color: white;
    }
</style>
